<template>
  <div>
    <Header :configs="configs"></Header>
    <Nav :navData="navData" :navDataMenu="navDataMenu"></Nav>
    <div class="crumbs" v-if="pageType!=6">
      <div class="crumbs-center">
        <Nav-mianbaoxie :crumbsData="crumbsData"></Nav-mianbaoxie>
      </div>
    </div>
    <!-- 专业分类 -->
    <div v-if="pageType==1">
      <div class="screen">
        <div class="screen-center">
          <div class="screen-list">
            <dt>服务城市：</dt>
            <dd>
              <a v-for="item,index in openCityData" :key="index" :href="item.href?item.href:'javascript:void(0);'" :class="item.active?'active':''">{{item.shortName}}</a>
            </dd>
          </div>
          <br>
          <div class="screen-list" v-for="item,index in bklcType" :key="index" v-show="item.active">
            <dt>{{item.name}}：</dt>
            <dd>
              <a v-for="ite,ind in item.children" :key="ind" :href="ite.href?ite.href:'javascript:void(0);'" :class="ite.active?'active':''">{{ite.lable_name}}</a>
            </dd>
          </div>
        </div>
      </div>
      <div class="list-row">
        <div class="list-row-center">
          <div class="list-row-l">
            <ul>
              <li class="l-list" v-for="item,index in bklcData" :key="index">
                <div class="cover">
                  <a href="" :title="item.title">
                    <el-image :src="item.picture" :alt="item.title" :title="item.title" style="width: 100%;height: 100%;"></el-image>
                  </a>
                </div>
                <div class="item">
                  <h2 class="title">
                    <a href="" :title="item.title">{{item.title}}</a>
                    <div class="zixun">
                      <dt class="zixun-btn">快速咨询</dt>
                      <dd class="zixun-box">
                        <el-image :src="item.wx_qrcode" :alt="item.title" fit="cover" style="width: 100%;height: 100%;"></el-image>
                      </dd>
                    </div>
                  </h2>
                  <p class="desc">
                    <a href="" :title="item.title">{{item.describe}}</a>
                  </p>
                  <p class="zhuanye">
                    <a href="" v-for="ite,ind in item.lables" :key="ind" :title="ite.lable_name">{{ite.lable_name}}</a>
                  </p>
                  <p class="address">{{item.address}}</p>
                </div>
              </li>
            </ul>
            <div class="list-page">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-count="bklcTotal"
                hide-on-single-page
                @current-change="bklcTotalChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="list-row-r">
            <h3 class="r-title">院校推荐</h3>
            <Yuanxiaotuijian :listData="tjyxData"></Yuanxiaotuijian>
          </div>
        </div>
      </div>
    </div>
    <!-- 证书查询 -->
    <div v-if="pageType==2">
      <div class="list-row">
        <div class="list-row-center">
          <div class="list-row-l">
            <div class="zhengshu-row">
              <dd class="zhengshu-dd" v-for="item,index in zscxData" :key="index">
                <h3 class="zhengshu-title">{{item.name}}</h3>
                <ul class="zhengshu-ul">
                  <li class="zhengshu-li" v-for="ite,ind in item.children" :key="ind">
                    <a :href="ite.url" target="_blank" :title="ite.name">{{ite.name}}</a>
                  </li>
                </ul>
              </dd>
            </div>
          </div>
          <div class="list-row-r">
            <h3 class="r-title">院校推荐</h3>
            <Yuanxiaotuijian :listData="tjyxData"></Yuanxiaotuijian>
          </div>
        </div>
      </div>
    </div>
    <!-- 考证资讯 -->
    <div v-if="pageType==3">
      <div class="list-row" style="margin-top: 0;">
        <div class="list-row-center">
          <div class="list-row-l">
            <div class="screen-row">
              <div class="screen-list zixun-screen-list">
                <dd v-for="item,index in kzzxTypeData" :key="index">
                  <a :href="item.href" :class="item.active?'active':''">{{item.name}}</a>
                </dd>
              </div>
            </div>
            <ul>
              <li class="l-list zixun-l-list" v-for="item,index in kzzxData" :key="index">
                <div class="cover">
                  <a :href="`/kzzxxq/${item.id}.html`" :title="item.title">
                    <el-image :src="item.thumb" :alt="item.title" :title="item.title" fit="cover" style="width: 100%;height: 100%;"></el-image>
                  </a>
                </div>
                <div class="item">
                  <h2 class="title">
                    <a :href="`/kzzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                  </h2>
                  <p class="desc">
                    <a :href="`/kzzxxq/${item.id}.html`" :title="item.title">{{item.description}}</a>
                  </p>
                  <p class="type-author">类型：{{item.article_cate_id_str}}</p>
                  <p class="date">{{item.create_time_str}}</p>
                </div>
              </li>
            </ul>
            <div class="list-page">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-count="kzzxTotal"
                hide-on-single-page
                @current-change="kzzxTotalChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="list-row-r zixunxq-r" style="border: 0;">
            <dl class="zixunxq-tuijian">
              <h3 class="zixunxq-title">资讯推荐</h3>
              <ul class="list-ul">
                <li class="list-li" v-for="item,index in kzzxTjData" :key="index">
                  <a :href="`/kzzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                  <span class="date">{{item.create_time_str}}</span>
                </li>
              </ul>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <!-- 在线报名 -->
    <div v-if="pageType==4">
      <div class="form-page">
        <div class="form-page-center">
          <div class="form-title"><i class="num">01</i>您的姓名</div>
          <el-input type="text" :value="name" @input="name=$event" placeholder="请输入您的姓名（必填）"></el-input>
          <div style="height: 10px;"></div>
          <div class="form-title"><i class="num">02</i>联系方式</div>
          <el-input type="text" maxlength="11" :value="phone" @input="phone=$event" placeholder="请输入联系方式（必填）"></el-input>
          <div style="height: 10px;"></div>
          <div class="form-title"><i class="num">03</i>报考类型</div>
          <el-select v-model="type" style="width: 100%;" placeholder="请选择报考类型（必选）">
            <el-option value="低压电工证">低压电工证</el-option>
            <el-option value="高压电工证">高压电工证</el-option>
            <el-option value="焊工证">焊工证</el-option>
            <el-option value="高处作业证">高处作业证</el-option>
            <el-option value="空调与制冷证">空调与制冷证</el-option>
            <el-option value="证件复审换新">证件复审换新</el-option>
            <el-option value="其他特种工操作证">其他特种工操作证</el-option>
            <el-option value="学历提升">学历提升</el-option>
          </el-select>
          <div style="height: 10px;"></div>
          <div class="form-title"><i class="num">04</i>报考专业</div>
          <el-input type="text" :value="major" @input="major=$event" placeholder="请输入报考专业（非必填）"></el-input>
          <div style="height: 10px;"></div>
          <div class="form-title"><i class="num">05</i>留言回复</div>
          <el-input type="textarea" placeholder="请输入您留言的内容（非必填）" rows="10" :value="remarks" @input="remarks=$event"></el-input>
          <div class="form-submit">
            <el-button type="primary" :disabled="formDisabled" @click="saveForm">提 交</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 考证资讯详情 -->
    <div v-if="pageType==5">
      <div class="list-row">
        <div class="list-row-center zixunxq-row-center">
          <div class="zixunxq-l">
            <h1 class="zixunxq-title">{{kzzxxqData.title}}</h1>
            <div class="zixunxq-author">
              <p>作者：超级管理员</p>
              <p>发布时间：{{kzzxxqData.create_time_str}}</p>  
            </div>
            <div class="hr"></div>
            <div class="zixunxq-content" v-html="kzzxxqData.content"></div>
          </div>
          <div class="zixunxq-r">
            <dl class="zixunxq-tuijian">
              <h3 class="zixunxq-title">资讯推荐</h3>
              <ul class="list-ul">
                <li class="list-li" v-for="item,index in kzzxTjData" :key="index">
                  <a :href="`/kzzxxq/${item.id}.html`" :title="item.title">{{item.title}}</a>
                  <span class="date">{{item.create_time_str}}</span>
                </li>
              </ul>
            </dl>
            <dl class="zixunxq-tuijian m20">
              <h3 class="zixunxq-title">院校推荐</h3>
              <Yuanxiaotuijian :listData="tjyxData" :listClass="`list-ul zixunzq-tj-ul`"></Yuanxiaotuijian>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <!-- 提升学历 -->
    <div v-if="pageType==6">
      <!-- banner -->
      <div class="banner-wrap">
        <div class="banner-container relative m0a">
          <div
            style="width:1920px;height:100%;position:absolute;top:0;left:50%;margin-left:-960px;background:url(https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/student.png) 230px center no-repeat;background-size:36%;">
            <div class="bc-box right">
              <h4>轻松考下成人名校学历</h4>
              <h4>大专本科仅 <span>1920</span> 起</h4>
              <div class="bc-txt-box">
                <p>适合于上班族/低基础/快速提升学历的人群</p>
                <ul>
                  <li class="li-bg1">211名校</li>
                  <li class="li-bg2">学信网可查</li>
                  <li class="li-bg3">轻松入学</li>
                </ul>
              </div>
              <div class="bc-btn-box">
                <a class="white bold tc" rel="nofollow" href="javascript:;" onclick="onKST();">短学制本科入口</a>
                <a class="white bold tc btn-bg1" rel="nofollow" href="javascript:;" onclick="onKST();">低基础提升入口</a>
                <a class="white bold tc btn-bg2" rel="nofollow" href="javascript:;" onclick="onKST();">上班族专属入口</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 学历提升方式一览表 -->
      <div class="part2-warp xl-type">
        <div class="slogan w1136 m0a tc">
          <div class="bot-line">
            <h2><a rel="nofollow" href="javascript:;" onclick="onKST();">短时间毕业 四大学历提升方式解析</a></h2>
            <div class="un-line m0a"></div>
          </div>
          <p>适用于任何想提升学历、有上进心的学员</p>
        </div>
        <div class="part2-container w1136 m0a">
          <div class="p2-list-box clearfix">
            <div class="left p2-list-per-box">
              <a class="nofollow" href="javascript:;" onclick="onKST();">
                <div class="p2-top-icon white m0a tc">
                  自
                </div>
                <h2 class="tc">
                  自学考试
                </h2>
              </a>
              <ul>
                <li>
                  · 1.5-2年毕业
                </li>
                <li>
                  · 一年考两次
                </li>
                <li>
                  · 免试入学
                </li>
                <li>
                  · 业余学习，上班族首选
                </li>
                <li>
                  · 含金量：国家承认，学信网可查
                </li>
              </ul>
              <!--<a  rel="nofollow"  class="m0a white tc" href="javascript:;" onclick="onKST();">
                              了解自学考试
                          </a>-->
              <a class="m0a white tc" href="javascript:;" title="了解自学考试">了解自学考试</a>
            </div>


            <div class="left p2-list-per-box p2-bg-color3">
              <a class="nofollow" href="javascript:;" onclick="onKST();">
                <div class="p2-top-icon white m0a tc">
                  函
                </div>
                <h2 class="tc">
                  函授电大
                </h2>
              </a>

              <ul>
                <li>
                  · 2.5年毕业
                </li>
                <li>
                  · 一年考两次
                </li>
                <li>
                  · 校考入学
                </li>
                <li>
                  · 网络教学或教学站学习
                </li>
                <li>
                  · 含金量：国家承认，学信网可查
                </li>
              </ul>
              <a class="m0a white tc" rel="nofollow" href="javascript:;" onclick="onKST();">
                了解函授电大
              </a>
            </div>




            <div class="left p2-list-per-box p2-bg-color1">
              <a class="nofollow" href="javascript:;" onclick="onKST();">
                <div class="p2-top-icon white m0a tc">
                  成
                </div>
                <h2 class="tc">
                  成人高考
                </h2>
              </a>
              <ul>
                <li>
                  · 2.5年毕业
                </li>
                <li>
                  · 一年考一次
                </li>
                <li>
                  · 统考入学
                </li>
                <li>
                  · 分业余、脱产等教学形式
                </li>
                <li>
                  · 含金量：国家承认，学信网可查
                </li>
              </ul>
              <!--<a class="m0a white tc" href="javascript:;" onclick="onKST();">
                              了解成人高考
                          </a>-->
              <a class="m0a white tc" href="javascript:;" title="了解成人高考">了解成人高考</a>
            </div>

            <div class="left p2-list-per-box p2-bg-color2">
              <a class="nofollow" href="javascript:;" onclick="onKST();">
                <div class="p2-top-icon white m0a tc">
                  网
                </div>
                <h2 class="tc">
                  网教远程
                </h2>
              </a>
              <ul>
                <li>
                  · 2.5年毕业
                </li>
                <li>
                  · 一年考两次
                </li>
                <li>
                  · 校考入学
                </li>
                <li>
                  · 网络教学无地域限制
                </li>
                <li>
                  · 含金量：国家承认，学信网可查
                </li>
              </ul>
              <!--<a class="m0a white tc" href="javascript:;" onclick="onKST();">
                              了解网教远程
                          </a>-->
              <a class="m0a white tc" href="javascript:;" title="了解网教远程">了解网教远程</a>
            </div>

          </div>
          <div class="p2-bottom-btn tc">
            <a class="tc white the-public-btn" href="javascript:;" onclick="onKST();">
              了解如何选学历
              <span class="white tc">
                &gt;
              </span>
            </a>
            <a class="tc white the-public-btn p2-bb-btn" href="javascript:;" onclick="onKST();">
              了解更多学历区别
              <span class="white tc">
                &gt;
              </span>
            </a>
          </div>
        </div>
      </div>
      <div class="through-train">
        <h4>2022提升学历报考直通车</h4>
        <p>名校直通班报名即将截止，限额100名<br>快速毕业，出来就是名校</p>
        <a rel="nofollow" href="javascript:;" onclick="onKST();">点击报名&gt;&gt;</a>
      </div>
      <!-- 本期报考接受以下提升方案 -->
      <div class="part3-warp">
        <div class="slogan w1136 m0a tc">
          <div class="bot-line">
            <h2>热门专业 助你离大学更进一步</h2>
            <div class="un-line m0a"></div>
          </div>
          <p>名校 + 专业 + YOU = 精英</p>
        </div>
        <div class="w3-container clearfix">
          <div class="major-block">
            <h5>管理类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>行政管理</li>
                <li>工商管理</li>
                <li>人力资源管理</li>
                <li>项目管理</li>
                <li>会展管理</li>
                <li>商务管理</li>
              </a>
            </ul>
          </div>
          <div class="major-block">
            <h5>经济类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>会计学</li>
                <li>金融学</li>
                <li>市场营销</li>
                <li>电子商务</li>
                <li>国际经济与贸易</li>
                <li>经济学</li>
              </a>
            </ul>
          </div>
          <div class="major-block">
            <h5>工程类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>工程与造价管理</li>
                <li>土木工程</li>
                <li>建筑工程</li>
                <li>安全工程</li>
                <li>工业工程</li>
                <li>机械自动化</li>
              </a>
            </ul>
          </div>
          <div class="major-block">
            <h5>计算机类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>计算机科学</li>
                <li>通讯工程</li>
                <li>计算机网络技术</li>
                <li>信息管理</li>
                <li>网络工程</li>
                <li>计算机应用技术</li>
              </a>
            </ul>
          </div>
          <div class="major-block">
            <h5>教育类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>学前教育</li>
                <li>幼儿艺术教育</li>
                <li>小学教育</li>
                <li>教育管理</li>
                <li>教育科学</li>
                <li>心理学</li>
              </a>
            </ul>
          </div>
          <div class="major-block">
            <h5>医学类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>医学综合</li>
                <li>护理学</li>
                <li>中医药学</li>
                <li>临床医学</li>
                <li>针灸推拿学</li>
                <li>口腔医学</li>
              </a>
            </ul>
          </div>
          <div class="major-block major-block-last">
            <h5>语言法律类</h5>
            <ul><a class="hanshou1" href="javascript:;" onclick="onKST();">
                <li>英语专业</li>
                <li>法律专业</li>
                <li>汉语言文学</li>
                <li>日语专业</li>
                <li>小语种专业</li>
                <li>对外汉语</li>
              </a>
            </ul>
          </div>
        </div>
        <a class="tc white the-public-btn" href="javascript:;" onclick="onKST();" id="more-major">在线咨询更多专业<span class="white tc">&gt;</span></a>
      </div>
      <!-- 全方位为你解析通过率，每一步都为你做好规划 -->
      <div class="part8-wrap">
        <div class="slogan w1136 m0a tc">
          <div class="bot-line">
            <h2>
              全方位为你解析通过率，每一步都为你做好规划
            </h2>
            <div class="un-line m0a">
            </div>
          </div>
          <p>
            适合大部分学员的高校毕业学习模式
          </p>
        </div>
        <div class="p8-container w1136 m0a tc relative">
          <div class="p8c-box absolute clearfix">
            <div class="p8c-txt left">
              <h2>
                专业全方位的报考指导，帮你走好第一步
              </h2>
              <p>
                根据多年的学历教育经验，考期与科目合理搭配，帮你及时报考，不错过每一次机会，轻松提升学历。
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                免费获取报考指导
              </a>
            </div>
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic1.jpg" class="w100" alt="">
            </div>
          </div>
          <div class="p8c-box absolute p8c-box-pos1 clearfix">
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic2.jpg" class="w100" alt="">
            </div>
            <div class="p8c-txt left">
              <h2>
                轻松学习，线上教学
              </h2>
              <p>
                线上教学，只需碎片化的时间，时间自由，学习方式灵活，无论你是在职还是在校，都可以满足你。更高效的学习方式让你有更高质量的生活
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                免费省钱试学
              </a>
            </div>
          </div>
          <div class="p8c-box absolute p8c-box-pos2 clearfix">
            <div class="p8c-txt left">
              <h2>
                改成浓缩考点，拒绝冗杂
              </h2>
              <p>
                拒绝复杂，摆脱厚重资料，高薪聘请的10年经验教研老师，根据历年真题，考题，教材进行整合，去冗余，只留高效，精华的考点，符合上班族的学习习惯，只需利用碎片时间，就能轻松掌握考点，让考试更轻松
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                考纲领取通道
              </a>
            </div>
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic3.jpg" class="w100" alt="">
            </div>
          </div>
          <div class="p8c-box absolute p8c-box-pos3 clearfix">
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic4.jpg" class="w100" alt="">
            </div>
            <div class="p8c-txt left">
              <h2>
                3段式解析，题库制测评
              </h2>
              <p>
                深入调研历年考题，采取三档考点归纳法，切片化解析考题中的知识点，全面解析历年考点分布，总结答题规范内容形式，随堂考核，及时巩固知识，把每天的课程都掌握扎实
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                题库试用名额申请
              </a>
            </div>
          </div>
          <div class="p8c-box absolute p8c-box-pos4 clearfix">
            <div class="p8c-txt left">
              <h2>
                随时答疑，让你的疑问不过夜
              </h2>
              <p>
                线上教学，有问必答，一目了然，老师随时答疑，会对你的问题进行详细讲解。全程随问随答，让你把每个知识点吃透，掌握，是每个老师的责任
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                在线咨询考试详情
              </a>
            </div>
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic5.jpg" class="w100" alt="">
            </div>
          </div>
          <div class="p8c-box absolute p8c-box-pos5 clearfix">
            <div class="p8c-img left">
              <img src="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/picture/pic6.jpg" class="w100" alt="">
            </div>
            <div class="p8c-txt left">
              <h2>
                学员交流，大家一起进步才是好的结果
              </h2>
              <p>
                每天的课程，考点，题库测评，学员做完后可以进行相互讨论，共同解决疑难问题，互相帮助，进步才能更快问问哪些专业好通过
              </p>
              <a class="white tc" href="javascript:;" onclick="onKST();">
                问问哪些专业好通过
              </a>
            </div>
          </div>


        </div>
      </div>
      <!-- 年成人学历报名已经开始 -->
      <div class="part10-wrap">
        <div class="slogan w1136 m0a tc">
          <div class="bot-line">
            <h2>学历提升的九大作用</h2>
            <div class="un-line m0a"></div>
          </div>
        </div>
        <div class="p10-container w1136 m0a tc clearfix">
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic1.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                升值加薪必备
              </h2>
              <p>
                高等学历是单位衡量员工的重要方面,直接与考核工资,资金挂钩
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic2.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                考资格证必备
              </h2>
              <p>
                取得高等学历是考取某些资格证书的必备条件。如：律师证，建造师，工程师等
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic3.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                考公务员必备
              </h2>
              <p>
                公务员工作稳定，待遇也好，国家规定只有大专及以上学历才能参加公务员考试
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic4.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                考研必备
              </h2>
              <p>
                报考研究生是有学历要求 ，高等学历才能更有优势
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic5.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                积分落户必备
              </h2>
              <p>
                全国等大城市都是积分落户 的，学历越高，分数越高，落户越轻松
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic6.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                出国留学必备
              </h2>
              <p>
                许多国家都是成人我国的成人本科学 历，有了本科，才能继续出国读研究生
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic7.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                求职就业必备
              </h2>
              <p>
                高学历是好工作的敲门砖，让好工作好职位主动找你
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic8.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                考职称，评职称必备
              </h2>
              <p>
                考职称，评职称都是按照学历进行考核的，学历达不到，是没有评选资格的
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
          <div class="p10c-box left J-big-wrap relative">
            <div class="img-box">
              <img class="lazy" data-original="https://syextedu.oss-cn-shenzhen.aliyuncs.com/static_6/images/ic9.png"
                alt="">
            </div>
            <div class="txt-box J-txt-box absolute">
              <h2>
                外企求职
              </h2>
              <p>
                想要进入外企，必须能要有高等学历
              </p>
              <a class="white m0a" href="javascript:;" onclick="onKST();">
                点击咨询
              </a>
            </div>
            <div class="hide-box J-hide-box absolute">
            </div>
          </div>
        </div>
      </div>
      <!-- <script src="/js/common.js"></script> -->
    </div>
    <!-- 报考流程 -->
    <div v-if="pageType==7">
      <div class="lc-center">
        <div class="lc-left">
          <div class="cen_art"><span style="color:#027dc1;">1.网络咨询</span><br><span style="color:#545152;">通过网络或电话咨询，简单了解你的个人情况，如从业年限、所学专业、技能熟练度等</span><br><br><span style="color:#027dc1;">2.在线（到校）报名</span><br><span style="color:#545152;">简单沟通确认你满足培训(考证)的基本条件即可到详细了解，如果确定即可现场报名！</span><br><br><span style="color:#027dc1;">3.参加课程培训</span><br><span style="color:#545152;">有以下条件之一者需参加培训：<br>①：报名培训的学员<br>②：没有工作经验的<br>③：学历不达标者<br>④：年龄不达标的<br><br>若满足免培条件可直接参加考试取证！</span><br><br><span style="color:#027dc1;">4.组织国家职业资格（特种作业操作）考试</span><br><span style="color:#545152;">满足免培 或参加过培训的学员可由组织参加考试，一般免培人员为报名后一至两周参加考试，培训学员培训结束即可参加考试。</span><br><br><span style="color:#027dc1;">5.分发资格(操作)证书/结业证书</span><br><span style="color:#545152;">考试合格的学员可以根据自己报考的工种获得由国家相关部门办法的证书，参加培训的学员可获得四川教培网颁发的《培训结业证书》<br>①：参加等级证(资格证)考试的学员可获得国家人社（劳动部）办法的《国家职业资格证书》<br>②：参加上岗证(操作证)考试的学员可获得安监颁发的《特种作业操作证》<br>③：参加四川教培网培训班的学员可获得颁发的《XXX结业证书》</span><br><br><span style="color:#027dc1;">6.网上查询真伪并正式使用</span><br><span style="color:#545152;">领取证书后一般操作证可立即查询，资格证需要等2-6月的时间才能查询。<br>①：操作证取证时即可查询<br>②：资格证省网查询：1-3月即可查询<br>③：资格证国家网查询：3-6月即可查询</span><br><br><span style="color:#545152;">点此直接进入查询界面→</span> <a href="/zscx" target="_blank"><span style="color:#0000ff;">《各类证书网上查询入口》</span></a><div style="clear:both;"></div></div>
        </div>
        <div class="list-row-r">
          <h3 class="r-title">院校推荐</h3>
          <Yuanxiaotuijian :listData="tjyxData"></Yuanxiaotuijian>
        </div>
      </div>
    </div>
    <Footer-baoming :links="links" :configs="configs"></Footer-baoming>
    <Footer :configs="configs"></Footer>
    <Fixed-footer :configs="configs"></Fixed-footer>
    <Fixed-nav :configs="configs"></Fixed-nav>
    <Fixed-call :configs="configs"></Fixed-call>
  </div>
</template>

<script>
let tdk = {
  title: '考证',
  keywords: '考证',
  description: '考证'
}
import u from '@/plugins/comm'
export default {
  head() {
    return {
      title: tdk.title,
      meta: [
        { name: 'keywords', content: tdk.keywords },
        { name: 'description', content: tdk.description },
      ]
    }
  },
  validate({ params }) {
    let flag = false
    if (
      params.folder=='zyfl' ||
      (params.folder=='bklc' && !params.id) ||
      (params.folder=='zscx' && !params.id) ||
      params.folder=='kzzx' ||
      (params.folder=='zxbm' && !params.id) ||
      (params.folder=='kzzxxq' && /^[0-9a-z]*\.html$/.test(params.id)) ||
      (params.folder=='xlts' && !params.id)
    ) {
      flag = true
    }
    return flag
  },
  async asyncData({ app, params, query, store, links, navData, navDataMenu, redirect, configs }) {
    let pageType = ''
    let tjyxData = []
    let zscxData = []
    let bklcType = {}
    let bklcTotal = 1
    let bklcParams = {
      page: 1,
      page_size: 10,
      lable_cate_id: '',
      lable_id: '',
      keywords: '',
      cityAliases: ''
    }
    let bklcData = []
    let kzzxTypeData = [{
      id: 1,
      name: '考证行情',
      aliases: 'kzhq',
      active: false
    }, {
      id: 2,
      name: '考证动态',
      aliases: 'kzdt',
      active: false
    }, {
      id: 3,
      name: '学历提升',
      aliases: 'xlts',
      active: false
    }, {
      id: 4,
      name: '招生简章',
      aliases: 'zsjz',
      active: false
    }]
    let kzzxTotal = 1
    let kzzxParams = {
      page: 1,
      page_size: 10,
      article_cate_id: null
    }
    let kzzxData = []
    let kzzxTjData = []
    let kzzxxqData = {}
    let crumbsData = []
    let openCityData = []

    /**
     * 设置TDK
     * @param {String} title 标题
     * @param {String} keywords 关键词
     * @param {String} description 描述
     */
    function setTDK(title, keywords, description, redirect) {
      tdk.title = title
      tdk.keywords = keywords
      tdk.description = description
    }
    // ==== 专业分类 ====
    if (params.folder == 'zyfl') {
      pageType = 1
      let crumbsTypeName = ''
      let crumbsCityName = ''
      // 截取搜索内容
      bklcParams.keywords = query.keywords || ''
      // 修改面包屑
      crumbsData = [{
        name: '首页',
        href: '/'
      }, {
        name: '专业分类',
        href: ''
      }]
      // 拆分路径
      let parameCityAliases = ''
      let parameTypeOne = ''
      let parameTypeTwo = ''
      let paramsType = params.id ? params.id.split('-') : []
      paramsType.forEach(item => {
        // 城市
        if (item.charAt(0) == 'c') {
          parameCityAliases = item.substring(1)
        }
        // 一大类
        if (item.charAt(0) == 'a') {
          parameTypeOne = item.substring(1)
        }
        // 二大类
        if (item.charAt(0) == 'b') {
          parameTypeTwo = item.substring(1)
        }
      })
      // 获取开通城市
      let getOpenCity = await u.http({
        url: store.state.queryOpenCityList
      })
      if (getOpenCity.code == 200) {
        openCityData = getOpenCity.data
        openCityData.unshift({
          id: '',
          name: '全部',
          shortName: '全部',
          aliases: ''
        })
        openCityData.forEach(item => {
          item.active = false
          item.href = `/zyfl/`
          if (item.aliases) {
            item.href = `/zyfl/c${item.aliases}`
          }
          if (parameTypeOne) {
            item.href = `/zyfl/a${parameTypeOne}${item.aliases?'-c'+item.aliases:''}`
          }
          if (item.aliases == parameCityAliases) {
            item.active = true
            bklcParams.cityAliases = item.aliases
            // 修改面包屑
            if (item.aliases) {
              crumbsCityName = item.shortName
              crumbsData[1].href = '/zyfl/'
              crumbsData.push({
                name: item.shortName,
                href: ''
              })
            }
          }
        })
      }
      // 分类
      let getKzflData = await u.http({
        url: store.state.lables,
        method: 'GET'
      })
      if (getKzflData.code == 200) {
        bklcType = getKzflData.data
        bklcType.forEach(item => {
          item.active = (!parameTypeOne && !parameTypeTwo) ? true : false
          item.href = `/zyfl/a${item.id}`
          if (parameCityAliases) {
            item.href = `/zyfl/a${item.id}-c${parameCityAliases}`
          }
          if (item.id == parameTypeOne) {
            item.active = true
            bklcParams.lable_cate_id = item.id
            // 修改面包屑
            crumbsData[1].href = '/zyfl/'
            if (crumbsData.length > 2) {
              crumbsData[2].href = `/zyfl/${parameCityAliases?'c'+parameCityAliases:''}`
            }
            crumbsData.push({
              name: item.name,
              href: ''
            })
          }
          item.children.forEach(ite => {
            ite.active = false
            ite.href = `/zyfl/a${item.id}-b${ite.id}`
            if (parameCityAliases) {
              ite.href = `/zyfl/a${item.id}-b${ite.id}-c${parameCityAliases}`
            }
            if (ite.id == parameTypeTwo) {
              ite.active = true
              bklcParams.lable_id = ite.id
              crumbsTypeName = ite.lable_name
              // 修改面包屑
              crumbsData[1].href = '/zyfl/'
              if (crumbsData.length > 2) {
                crumbsData[2].href = `/zyfl/${parameCityAliases?'c'+parameCityAliases:''}`
                if (!parameCityAliases) {
                  crumbsData[2].href = `/zyfl/${parameTypeOne?'a'+parameTypeOne:''}`
                }
              }
              if (crumbsData.length > 3) {
                crumbsData[3].href = `/zyfl/${parameTypeOne?'a'+parameTypeOne:''}${parameCityAliases?'-c'+parameCityAliases:''}`
              }
              crumbsData.push({
                name: ite.lable_name,
                href: ''
              })
            }
          })
        })
      }
      // 列表
      bklcParams.cityAliases = ''
      let getBklc = await u.http({
        url: store.state.certificateIndex,
        method: 'GET',
        params: bklcParams
      })
      if (getBklc.code == 200) {
        bklcTotal = Math.ceil(getBklc.data.count / bklcParams.page_size)
        bklcData = getBklc.data.list
        bklcData.forEach(item => {
          item.picture = item.picture
          item.wx_qrcode = item.wx_qrcode
          // item.picture = u.imgPrefixed + item.picture
          // item.wx_qrcode = u.imgPrefixed + item.wx_qrcode
        })
      }
      // 修改tdk
      if (crumbsTypeName.indexOf('考证') > -1) {
        let abbreviation = crumbsTypeName.replace('考证', '') // 替换简称
        setTDK(`${crumbsCityName}${abbreviation}考证-初中高级操作证报考-价格查询-上海纺扬科技`, `${abbreviation}考证,${abbreviation}证报考价格查询,初级${abbreviation}操作证报考,中级${abbreviation}操作证报考,高级${abbreviation}操作证报考`, `上海纺扬科技为您提供${abbreviation}考证、${abbreviation}初中高级操作证书报考、${abbreviation}证报考价格查询，正规报考机构，考证快,易通过,让您省心、放心。`)
      }
      else if (crumbsTypeName.indexOf('培训') > -1) {
        let abbreviation = crumbsTypeName.replace('培训', '') // 替换简称
        setTDK(`${crumbsCityName}${abbreviation}培训-正规培训机构与学校排名-上海纺扬科技`, `${abbreviation}培训,${abbreviation}培训学校排名,${abbreviation}培训机构排名`, `上海纺扬科技专注于技能培训、主要提供${abbreviation}培训、${abbreviation}培训学校、${abbreviation}培训机构排名查询及培训等业务,正规培训学校,您值得信赖`)
      }
      else if (crumbsTypeName.indexOf('复审') > -1) {
        let abbreviation = crumbsTypeName.replace('证复审', '') // 替换简称
        setTDK(`${crumbsCityName}${abbreviation}证复审-旧证复审换新价格-上海纺扬科技`, `${abbreviation}证复审,${abbreviation}证换新,${abbreviation}证复审价格`, `${abbreviation}证复审,旧证复审换新价格就到上海纺扬科技,全国通用,联网可查,诚信可靠`)
      }
      else {
        setTDK(`${crumbsCityName}电工-焊工-高处作业证及各类特种工操作证考证培训-专业分类-上海纺扬科技`, `电工考证,焊工考证,特种工操作证专业分类`, `上海纺扬科技汇集电工,焊工,高处作业证,低压电工,高压电工等操作证考证培训分类,全国通用,联网可查,诚信可靠`)
      }
    }
    // ==== 证书查询 ====
    if (params.folder == 'zscx') {
      pageType = 2
      // 修改面包屑
      crumbsData = [{
        name: '首页',
        href: '/'
      }, {
        name: '证书查询',
        href: ''
      }]
      let getZscx = await u.http({
        url: store.state.certificatequery,
        method: 'GET'
      })
      if (getZscx.code == 200) {
        zscxData = getZscx.data
      }
      // 修改tdk
      setTDK(`电工-焊工及各类特种工操作证证书查询-上海纺扬科技`, `电工证查询,焊工证查询,高处作业证查询,特种工操作证查询中心`, `电工,焊工,高处作业证,各种特种工操作证查询,在线查询各种证`)
    }
    // ==== 考证资讯 ====
    if (params.folder == 'kzzx') {
      pageType = 3
      let crumbsDataName = ''
      // 获取资讯分类
      // let getKzfl = await u.http({
      //   url: store.state.articlecate,
      //   method: 'GET'
      // })
      // if (getKzfl.code == 200) {
      //   kzzxTypeData = getKzfl.data
      // }
      kzzxTypeData.forEach(item => {
        item.href = `/kzzx/${item.aliases}`
        if (item.aliases == params.id) {
          item.active = true
          crumbsDataName = item.name
        }
      })
      // 列表 修改TDK
      switch(params.id) {
        case 'kzhq': 
          kzzxParams.article_cate_id = 4;
          setTDK(`各类特种工操作证报考行情-上海纺扬科技`, `特种工操作证报考行情`, `上海纺扬科技提供各类特种工操作证报考行情,考证资讯等实时新闻,报考,查询就到上海纺扬科技`)
          break;
        case 'kzdt': 
          kzzxParams.article_cate_id = 3;
          setTDK(`特种工操作证考证动态-实时更新最新、最全的新闻资讯`, `特种工操作证考证动态`, `考证动态,考证资讯每天实时更新,查询更多特种工操作证资讯就到上海纺扬科技`)
          break;
        case 'xlts': 
          kzzxParams.article_cate_id = 2;
          setTDK(`学历提升-成人自考-国家开放大学新闻资讯、实时更新`, `学历提升,成人自考,国家开放大学,学历提升新闻资讯`, `上海纺扬科技提供学历提升教育资讯,及教育资讯相关的各类信息`)
          break;
        case 'zsjz': 
          kzzxParams.article_cate_id = 1;
          setTDK(`职业技术学院-提供全国院校信息招生简章`, `职业技术学院,全国院校信息招生简章`, `职业技术学院,各类院校信息招生简章,新闻资讯,实时更新`)
          break;
        default: redirect('/kzzx/kzhq');
      }
      let getKzzx = await u.http({
        url: store.state.articleIndex,
        method: 'GET',
        params: kzzxParams
      })
      if (getKzzx.code == 200) {
        kzzxTotal = Math.ceil(getKzzx.data.count / kzzxParams.page_size)
        kzzxData = getKzzx.data.list
        kzzxData.forEach(item => {
          item.thumb = item.thumb
          // item.thumb = u.imgPrefixed + item.thumb
        })
      }
      // 修改面包屑
      crumbsData = [{
        name: '首页',
        href: '/'
      }, {
        name: crumbsDataName,
        href: ''
      }]
    }
    // ==== 在线报名 ====
    if (params.folder == 'zxbm') {
      pageType = 4
      // 修改面包屑
      crumbsData = [{
        name: '首页',
        href: '/'
      }, {
        name: '在线报名',
        href: ''
      }]
      // 修改tdk
      setTDK(`电工-焊工及各类特种工操作证-学历提升-职业技术学院报名入口`, `电工证报名,焊工证报名,高处作业证报名,特种工操作证报名,学历提升,职业技术学院`, `电工、焊工、高处作业证、学历提升、职业技术学院等特种工操作证报名入口，正规报名通道，诚信可靠`)
    }
    // ==== 考证资讯详情 ====
    if (params.folder == 'kzzxxq' && /^[0-9a-z]*\.html$/.test(params.id)) {
      pageType = 5
      // 列表
      let id = params.id ? params.id.split('.html')[0] : ''
      let getKzzxxq = await u.http({
        url: store.state.articleDetail,
        method: 'GET',
        params: {
          id
        }
      })
      if (!getKzzxxq.data) {
        redirect('/err')
      }
      if (getKzzxxq.code == 200 && getKzzxxq.data) {
        kzzxxqData = getKzzxxq.data
        // 修改面包屑
        crumbsData = [{
          name: '首页',
          href: '/'
        }, {
          name: '考证资讯',
          href: '/kzzx/'
        }, {
          name: kzzxxqData.title.length > 8 ? `${kzzxxqData.title.substr(0, 8)}...` : kzzxxqData.title,
          href: ''
        }]
        //修改tdk
        setTDK(`${kzzxxqData.title}-上海纺扬科技`, '资讯详情,考证资讯详情', kzzxxqData.description)
      }
    }
    // ==== 提升学历 ====
    if (params.folder == 'xlts') {
      app.head.link.push({
        rel: 'stylesheet',
        href: '/css/global.css'
      })
      app.head.script.push({
        src: '/js/jquery.min.js',
        ssr: false
      }, {
        src: '/js/jquery.lazyload.min.js',
        ssr: false
      }, {
        src: '/js/main.js',
        ssr: false
      })
      pageType = 6
      //修改tdk
      setTDK('学历提升_成人自考_专升本科提升学历正规机构报名入口', '学历提升,提升学历,成人大专,成人本科,专升本,自考本科,成人自考', '学历提升网是一个为广大考生提供成人学历报考官网的正规机构，为大家提供自学考试，成人高考，成人专升本，成人高升专以及网络教育等教育方式,同时提供自考本科专升本报名入口的相关资讯，主要经营的是学历提升辅导。')
    }
    // ==== 报考流程 ====
    if (params.folder == 'bklc') {
      pageType = 7
      // 修改面包屑
      crumbsData = [{
        name: '首页',
        href: '/'
      }, {
        name: '报考流程',
        href: ''
      }]
      setTDK(`电工-焊工-高处作业证-特种工操作证报考流程-上海纺扬科技`, `电工证报考流程,焊工证报考流程,高处作业证报考流程,空调与制冷作业证报考流程,特种工操作证报考流程`, `了解电工,焊工,高处作业证,空调与制冷作业证,特种工操作证报考流程就上上海纺扬科技`)
    }
    // 院校推荐
    let getTjyx = await u.http({
      url: store.state.collegerecommend,
      method: 'GET'
    })
    if (getTjyx.code == 200) {
      tjyxData = getTjyx.data
      tjyxData.forEach(item => {
        item.logo = item.logo
        // item.logo = u.imgPrefixed + item.logo
      })
    }
    // 考证资讯推荐
    let getKzzxTjData = await u.http({
      url: store.state.recommend,
      method: 'GET'
    })
    if (getKzzxTjData.code == 200) {
      kzzxTjData = getKzzxTjData.data
    }
    
    return {
      links,
      pageType,
      paramsFolder: params.folder,
      paramsId: params.id,
      navData,
      navDataMenu,
      crumbsData,
      tjyxData,
      zscxData,
      bklcType,
      bklcTotal,
      bklcParams,
      bklcData,
      kzzxTypeData,
      kzzxTotal,
      kzzxParams,
      kzzxData,
      kzzxTjData,
      kzzxxqData,
      configs,
      openCityData
    }
  },
  data() {
    return {
      name: '',
      phone: '',
      type: '学历提升',
      major: '',
      remarks: '',
      formDisabled: false,
    }
  },
  methods: {
    // 报考流程分页
    bklcTotalChange(e) {
      this.bklcParams.page = e
      this.bklcData = []
      this.getBlkc()
    },
    // 获取报考流程列表
    getBlkc() {
      u.http({
        agent: true,
        url: this.$store.state.certificateIndex,
        method: 'GET',
        params: this.bklcParams
      }).then(res => {
        if (res.code == 200) {
          this.bklcData = res.data.list
        }
      })
    },
    // 获取考证资讯列表
    getKzzx() {
      u.http({
        agent: true,
        url: this.$store.state.articleIndex,
        method: 'GET',
        params: this.kzzxParams
      }).then(res => {
        if (res.code == 200) {
          this.kzzxData = res.data.list
        }
      })
    },
    // 考证资讯分页
    kzzxTotalChange(e) {
      this.kzzxParams.page = e
      this.kzzxData = []
      this.getKzzx()
    },
    // 提交报名
    saveForm() {
      if (!/^[\u4e00-\u9fa5]{1,}$/.test(this.name)) {
        this.$message({
          message: '请正确输入您的姓名',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请正确输入联系方式',
          type: 'warning'
        })
        return false
      }
      if (this.type == '') {
        this.$message({
          message: '请选择报考类型',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      u.http({
        agent: true,
        url: this.$store.state.consult,
        headers: {
          'content-type': 'application/json'
        },
        data: {
          user_name: this.name,
          phone: this.phone,
          type: this.type,
          // type: this.type == '学历' ? 2 : 1,
          profession_name: this.major,
          message: this.remarks
        }
      }).then(res => {
        if (res.code == 200) {
          this.name = ''
          this.phone = ''
          this.major = ''
          this.remarks = ''
          this.formDisabled = false
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
    }
  }
}
</script>